﻿@model Lead2012.ViewModels.LeadViewModel

@{
    ViewBag.Title = "Tìm kiếm khách hàng";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form class="form" action="#" id="viewItemList">
    <fieldset>						
        <div id="app-body" class="content">
	        <h2 class="app">
		        <span class="viewtitle"><strong>Tìm kiếm khách hàng</strong></span>
	        </h2>
                
            <div class="title nomargin">
		        <h3>Danh sách khách hàng</h3>
	        </div>

            <span class="paging" data-bind="visible: ItemList().length>0">
                <span class="pageleft">                
                    <span class="total" data-bind='text: PageText'></span>
                    <span class="show ">Hiển thị <input type="text" class="text" id="pagesize" data-bind="value: PageSize, attr: {maxlength: 3}" /> trên trang <span class="smallText" data-bind="text: PageSizeText"></span> </span>
                </span>
                <span class="pages">
                    <span class="smallText" data-bind="text: PageCurrentText, visible: ItemList().length>0"></span>Trang <input type="text" class="text" id="pagecurrent" data-bind='value: PageIndex, enable: ItemList().length>0' /> của <span data-bind='text: TotalPage' class="totalpages"></span>
                    <a href="javascript:void(0)" data-bind="click: PrevPage, attr: {'class': PrevButtonClass}">Prev </a>
  		            <a href="javascript:void(0)" data-bind="click: NextPage, attr: {'class': NextButtonClass}">Next </a>
                </span>
            </span>

                <div id="gridLead" class="table table-leads" data-bind="visible: ItemList().length>0">
                    <div class="title">
                        <div class="col1" data-bind='click: function(event) { SetOrder(event, "Name")}'>
                            <span class="w" style="height:22px">
                                <a href="javascript:void(0)">Tên</a>
                                <div class="sort_wrapper" id="Name">  
                                    <span class="grid_order ui_icon"></span>
                                </div>                                        
                            </span>                          
                        </div>
			            <div class="col1 col2" data-bind='click: function(event) { SetOrder(event, "Phone")}'>
                            <span class="w" style="height:22px">
                                <a href="javascript:void(0)">Điện thoại</a>
                                <div class="sort_wrapper" id="Phone">  
                                    <span class="grid_order ui_icon"></span>
                                </div>              
                            </span>
                        </div>
			            <div class="col1 col3" data-bind='click: function(event) { SetOrder(event, "Email")}'>
                            <span class="w" style="height:22px">
                                <a href="javascript:void(0)">E-mail</a>
                                <div class="sort_wrapper" id="Email">  
                                    <span class="grid_order ui_icon"></span>
                                </div>              
                            </span>
                        </div>
			            <div class="col1 col4" data-bind='click: function(event) { SetOrder(event, "DateAdded")}'>
                            <span class="w" style="height:22px">
                                <a href="javascript:void(0)">Ngày thêm</a>
                                <div class="sort_wrapper" id="DateAdded">  
                                    <span class="grid_order ui_icon desc"></span>
                                </div>              
                            </span>
                        </div>
			            <div class="col1 col5" data-bind='click: function(event) { SetOrder(event, "LastAction")}'>
                            <span class="w" style="height:22px">
                                <a href="javascript:void(0)">Cập nhật cuối</a>
                                <div class="sort_wrapper" id="LastAction">  
                                    <span class="grid_order ui_icon"></span>
                                </div>              
                            </span>
                        </div>			            
			            <div class="col1 col6">
                            <span class="w" style="height:22px">Trạng thái</span>
                        </div>
			            <div class="col1 col8" data-bind='visible: VisibleUserColumn'>
                            <span class="w" style="height:22px">Người dùng</span>
                        </div>
			            <div class="col1 col9">
                            <span class="w" style="height:22px" data-bind="text: FieldName1">          
                            </span>
                        </div>
			            <div class="col1 col10">
                            <span class="w" style="height:22px" data-bind="text: FieldName2">            
                            </span>
                        </div>
			            <div class="col1 col11"><span class="w" style="height:22px">Số lần</span></div>
			            <div class="col1 col12 centeralign"><span class="w" style="height:22px">Xóa</span></div>
                    </div>

                    <div class="linegroup" data-bind="foreach: ItemList">
                        <div class="line" data-bind="attr:{'class': $root.LineClass($index(), $parent.ItemList().length - 1, StatusType)}">                       
			                <div class="col1"><span class="w" style="min-height: 24px;"><a data-bind='text: Name, attr: {href: LeadEdit, title: Name}'></a></span></div>
			                <div class="col1 col2">
                                <span class="w" style="min-height: 24px;">
                                    <span  data-bind='text: Phone, attr: {title: Phone}'></span>
                                </span>
                            </div>
			                <div class="col1 col3">
                                <span class="w" style="min-height: 24px;">
                                    <a data-bind='visible: ShowEmailLink, text: Email, attr: {title: Email, href: "mailto:" + Email}'></a>
                                    <span  data-bind='visible: !ShowEmailLink, text: Email, attr: {title: Email}'></span>
                                </span>
                            </div>
			                <div class="col1 col4"><span class="w" style="min-height: 24px;" data-bind='text: DateAdded,attr: {title: DateAdded}'></span></div>
			                <div class="col1 col5"><span class="w" style="min-height: 24px;" data-bind='text: LastAction,attr: {title: LastAction}'></span></div>
			                <div class="col1 col6"><span class="w" style="min-height: 24px;"><span class="green" data-bind='text: Status, attr: {title: Status, "style": "color: " + Color}'></span></span></div>
			                <div class="col1 col8" data-bind="visible: UserVisible">
                                <span class="w" style="min-height: 24px;">
                                    <a data-bind='text: UserName, click: $parent.ReassignLead, attr: {href: "javascript:void(0)", title: UserName}'></a>
                                </span>
                            </div>
			                <div class="col1 col9"><span class="w" style="min-height: 24px;" data-bind='text: Vm1, attr: {title: Vm1}'></span></div>
			                <div class="col1 col10"><span class="w" style="min-height: 24px;" data-bind='text: Vm2, attr: {title: Vm2}'></span></div>
			                <div class="col1 col11 count-tooltip" style="cursor: pointer;" data-bind="visible: (ActionCount  != '0')">
                                <span class="w" style="min-height: 24px;" data-bind='text: ActionCount'></span>   
                                
                                <!-- loop tooltip -->
                                <div class="tooltip-content">
        							<div class="table tooltip-simpletable">
        								<div class="title">
        									<div class="col1">5 trạng thái cuối</div>
        									<div class="col1 col2">Người dùng</div>
        									<div class="col1 col3">Ngày - giờ</div>
        								</div>

                                        <div class="linetip" data-bind="foreach: StatusLog">                                        
                                            <div class="line">
        									    <div class="col1" data-bind="text: Title"></div>
        									    <div class="col1 col2" data-bind="text: Username"></div>
        									    <div class="col1 col3" style="border-right: medium none;" data-bind="text: DateDecs"></div>
        								    </div>
                                        </div>
        							</div>
        						</div>                        
                            </div>
                            <div class="col1 col11 no-count" style="cursor: pointer;" data-bind="visible: (ActionCount == '0')" title="Không có hành động nào">
                                <span class="w" style="min-height: 24px;" data-bind="text: ActionCount,attr: {title: ActionCount}">0</span>
                            </div>

			                <div class="col1 col12 centeralign" data-bind="attr:{'class': ($index() === ($parent.ItemList().length - 1))? 'col1 col12 centeralign btm': 'col1 col12 centeralign'}">
                                <span class="w" style="min-height: 24px;"><a class="btn btn-x" data-bind='visible: UserVisible, click: $parent.DeleteItem, attr: {href: "javascript:void(0)"}' >Delete</a></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel" data-bind="visible: ItemList().length<=0" style="display:none">
                    <div class="error-msg" ><span>Không kết quả nào được tìm thấy.</span></div>                        
                </div>  
               <div class="clear"></div>          
        </div>   
    </fieldset>  

    @Html.Partial("_PopupAssignLeadToUser")
    @Html.Partial("_PopupModelDelete")
</form>       
<script type="text/javascript">
        var data = @(Html.Raw(Json.Encode(Model)));
</script>

<script src="/Scripts/Leads/LeadWarehouseFind.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.no-count').tooltip({
        showURL: false,
        track: true,
        fade: 150,
        top: -40,
        left: -100
    }).css('cursor', 'pointer');
    $('#tooltip').addClass('bold').css('padding', '0px');
</script>